<template>
  <div id="home">
    <!-- 头部导航栏 -->
    <nav-bar class="home-nav">
      <div slot="center">首页</div>
    </nav-bar>
    <!-- 轮播图 -->
    <child-swiper :banners="banners" />
    <!-- 推荐 -->
    <recommend-views :recommends="recommends" />
    <!-- 每周流行 -->
    <feature-view />
    <!-- 导航栏 -->
    <tab-control :titles="['流行', '新款', '精选']" class="tab-control" />

    <div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>11</div>
      <div>22</div>
      <div>11</div>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import TabControl from "components/content/tabControl/TabControl";

import ChildSwiper from "./childswiper/ChildSwiper";
import RecommendViews from "./childswiper/RecommendViews";
import FeatureView from "./childswiper/FeatureView";

import { getHomeMultidata, getHomeGoods } from "network/home";

export default {
  name: "Home",
  components: {
    NavBar,
    TabControl,
    ChildSwiper,
    RecommendViews,
    FeatureView,
  },

  data() {
    return {
      banners: [],
      recommends: [],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
    };
  },

  created() {
    //请求首页内容
    this.getHomeMultidata();

    //请求商品的数据
    this.getHomeGoods("");
  },

  methods: {
    getHomeMultidata() {
      getHomeMultidata().then((res) => {
        console.log(res);
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    },

    getHomeGoods(type) {
      const page = this.goods[type].page + 1 //goods[type]的意思就是将对象里面的属性变成变量
      getHomeGoods(type, page).then((res) => {
        this.goods[type].list.push(...res.data.list)
      });
    },
  },
};
</script>
<style scoped>
#home {
  padding-top: 44px;
}

.home-nav {
  background-color: var(--color-tint);
  color: #fff;
  width: 100%;
  position: fixed;
  left: 0;
  left: 0;
  top: 0;
  z-index: 9;
}

.tab-control {
  background-color: #fff;
  position: sticky;
  top: 44px;
}
</style>